<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":""}){} %>
</head>
<body>
<div id="app" class="layui-fluid">

  <div class="layui-card">
    <div class="layui-card-body">
      <t-form :data="queryForm" label-width="calc(5em + 20px)" layout="inline" colon>
        <t-form-item label="组织名称">
          <t-input v-model="queryForm.name" placeholder="请输入组织名称" clearable></t-input>
        </t-form-item>
        <t-form-item label="组织代码">
          <t-input v-model="queryForm.code" placeholder="请输入组织代码" clearable></t-input>
        </t-form-item>
        <t-form-item label="组织状态">
          <t-select v-model="queryForm.status" :options="statusOptions" placeholder="请选择组织状态" clearable></t-select>
        </t-form-item>
        <t-space>
          <t-button theme="primary" @click="onScreen">
            <template #icon><i class="layui-icon layui-icon-search text-size-14 mr-10"></i></template>
            筛选
          </t-button>
          <t-button theme="primary" @click="fetchData">
            <template #icon><i class="layui-icon layui-icon-refresh text-size-14 mr-10"></i></template>
            重置
          </t-button>
          <t-button theme="primary">
            <template #icon><i class="layui-icon layui-icon-add-1 text-size-14 mr-10"></i></template>
            新增
          </t-button>
        </t-space>
      </t-form>
    </div>
  </div>

  <div class="layui-card">
    <div class="layui-card-body">
      <t-table :columns="columns" :data="table.data" :loading="table.loading" bordered hover resizable>
        <template #loading>
          <div class="t-table--loading-message">加载数据中，请稍后...</div>
        </template>
      </t-table>
    </div>
  </div>
</div>

<script>
  const PATH_URL = "";
</script>
<script>

  setupVue("#app", {
    setup() {

      // 查询表单
      const queryForm = Vue.reactive({ page: 1, limit: 10 });
      // 表格相关
      const table = useTreeTable();
      const fetchData = window.reloadData = () => fetchTree(axiosGet, PATH_URL + "page", queryForm, table);
      fetchData();

      // 打开编辑窗口
      const openEdit = (id) => {
        openLayer({
          content: PATH_URL + "edit",
          data: { id },
        });
      }

      // 删除
      const clickDelete = (row) => handleDelete(axiosDelete, PATH_URL + "delete", { id: row.id }, table, "确定删除系统组织吗？", fetchData);

      // 状态选项
      const statusOptions = [{ label: "全部", value: "" }, { label: "启用", value: 1 }, { label: "停用", value: 0 }]

      // 表格列表显示
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '', width: "50px" },
        { colKey: 'name', title: '组织名称', align: 'center', ellipsis: true },
        { colKey: 'code', title: '组织代码', align: 'center', ellipsis: true },
        { colKey: 'leader', title: '负责人', align: 'center' },
        { colKey: 'phone', title: '联系电话', align: 'center' },
        { colKey: 'email', title: '邮箱', align: 'center', ellipsis: true },
        { colKey: 'sort', title: '排序', align: 'center' },
        { colKey: 'status', title: '状态', align: 'center' },
        {
          title: '操作',
          align: 'center',
          cell: (h, { row }) => {
            return h(TDesign.Space, {}, [
              h(TDesign.Link, { theme: 'primary', onClick: () => onEdit(row) }, '编辑'),
              h(TDesign.Button, { theme: 'primary', onClick: () => onEdit(row) }, '编辑'),
              h(
                TDesign.Dropdown,
                {
                  minColumnWidth: 90,
                  placement: 'bottom',
                  options: [
                    { content: '删除', theme: 'error', onClick: () => onDelete(row) },
                  ],
                },
                h(
                  TDesign.Button,
                  { theme: 'primary', variant: 'outline' },
                  {
                    default: () => '更多操作',
                    suffix: () => h('i', { class: 'layui-icon layui-icon-down text-xs' }),
                  },
                ),
              ),
            ]);
          },
        },
      ];

      return {
        queryForm,
        table, columns, fetchData,
        openEdit,
        clickDelete,
        statusOptions,
      }
    },
  });
</script>


</body>
</html>
